<template>
  <div :class="classNames" :style="wrapperStyles">
    <div v-show="mergedVisible" :class="`${prefixCls}-mask`" />
    <div
      v-if="mergedVisible"
      ref="refWrapper"
      tabindex="0"
      :class="`${prefixCls}-wrapper`"
      @click="onMaskClick"
    >
      <div
        :class="`${prefixCls}-img-container`"
        :style="{ transform: `scale(${defaultScale}, ${defaultScale})` }"
        @click="onMaskClick"
      >
        <img
          ref="refImage"
          :key="src"
          :src="src"
          :class="[`${prefixCls}-img`]"
          @load="onImgLoad"
          @error="onImgError"
        />
      </div>

      <!-- <div v-if="isLoading" :class="`${prefixCls}-loading`">
        <IconLoading />
      </div>

      <transition name="image-fade">
        <div v-if="scaleValueVisible" :class="`${prefixCls}-scale-value`">
          {{ (scale * 100).toFixed(0) }}%
        </div>
      </transition>

      <PreviewToolbar
        v-if="isLoaded && actionsLayout.length"
        :actions="actions"
        :actions-layout="actionsLayout"
      >
        <slot name="actions" />
      </PreviewToolbar> -->

      <div v-if="closable" :class="`${prefixCls}-close-btn`" @click="close">
        <a-icon name="guanbi1"></a-icon>
      </div>
      <PreviewArrow v-if="inGroup" v-bind="groupArrowProps" />
    </div>
  </div>
</template>

<script lang="ts">
import {
  computed,
  CSSProperties,
  defineComponent,
  reactive,
  toRefs,
} from "vue";
import { useImageLoadStatus } from "./hooks/use-image-load-status";
import useMergeState from "@/ArcoUni/hook/use-merge-state";
import PreviewArrow from "./PreviewArrow.vue";
export default defineComponent({
  name: "PreviewGroup",
  components: {
    PreviewArrow,
  },
  props: {
    /**
     * @zh 图片获取地址
     * @en Image src
     */
    src: {
      type: String,
    },
    /**
     * @zh 默认缩放比
     * @en Default scale
     */
    defaultScale: {
      type: Number,
      default: 1,
    },
    /**
     * @zh 是否可见
     * @en Whether is visible
     * @vModel
     */
    visible: {
      type: Boolean,
      default: undefined,
    },
    /**
     * @zh 默认是否可见，非受控
     * @en Default visibility
     */
    defaultVisible: {
      type: Boolean,
      default: false,
    },
    /**
     * @zh 是否显示关闭按钮
     * @en Whether to show close button
     */
    closable: {
      type: Boolean,
      default: true,
    },
    inGroup: {
      type: Boolean,
      default: false,
    },
    groupArrowProps: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ["close", "update:visible"],
  setup(props, { emit }) {
    const prefixCls = "arco-image-preview";
    const { visible, defaultVisible } = toRefs(props);

    const [mergedVisible, setVisible] = useMergeState(
      defaultVisible.value,
      reactive({ value: visible }),
    );

    const { setLoadStatus } = useImageLoadStatus();

    function onMaskClick() {
      close();
    }

    function close() {
      if (mergedVisible.value) {
        emit("close");
        emit("update:visible", false);
        setVisible(false);
      }
    }

    const wrapperStyles = computed<CSSProperties>(() => {
      const positionStyles: CSSProperties = { position: "fixed" };
      return positionStyles;
    });

    const classNames = computed(() => {
      return [
        prefixCls,
        {
          [`${prefixCls}-hide`]: !mergedVisible.value,
        },
      ];
    });

    return {
      prefixCls,
      classNames,
      wrapperStyles,
      mergedVisible,
      close,
      onMaskClick,
      onImgLoad() {
        setLoadStatus("loaded");
      },
      onImgError() {
        setLoadStatus("error");
      },
    };
  },
});
</script>
